<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎯 精准幸运大转盘 🎪</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        header {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            text-align: center;
            color: #764ba2;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 10px rgba(118, 75, 162, 0.5); }
            to { text-shadow: 0 0 20px rgba(118, 75, 162, 0.8), 0 0 30px rgba(118, 75, 162, 0.6); }
        }

        .subtitle {
            font-size: 1.2em;
            color: #666;
        }

        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            display: flex;
            gap: 40px;
            max-width: 1200px;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
        }

        .wheel-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .wheel-container {
            position: relative;
            width: 450px;
            height: 450px;
            margin: 0 auto;
        }

        .wheel {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 50%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);
            transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
            border: 8px solid #FFD700;
            overflow: hidden;
        }

        /* 使用SVG绘制等分扇形 */
        .wheel-svg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .wheel-text {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .prize-text {
            position: absolute;
            font-weight: bold;
            font-size: 14px;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            transform-origin: center;
            white-space: nowrap;
        }

        /* 圆心指针设计 */
        .pointer-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 15;
            animation: pointerPulse 1.5s ease-in-out infinite;
        }

        @keyframes pointerPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.05); }
        }

        /* 指针从圆心指向顶部 */
        .pointer {
            position: absolute;
            top: -80px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 60px solid #ff4757;
            filter: drop-shadow(0 5px 15px rgba(255, 71, 87, 0.6));
        }

        /* 指针底座 - 圆心装饰 */
        .pointer-base {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ff4757, #ff6b6b);
            border-radius: 50%;
            border: 4px solid white;
            box-shadow: 0 5px 20px rgba(255, 71, 87, 0.5);
            z-index: 14;
        }

        /* 指针尖端高亮 */
        .pointer::after {
            content: '';
            position: absolute;
            top: -60px;
            left: -5px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 15px solid #ffeb3b;
            filter: drop-shadow(0 0 10px rgba(255, 235, 59, 0.8));
        }

        /* 指针指示线 */
        .pointer-line {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 3px;
            height: 80px;
            background: linear-gradient(to top, #ff4757, rgba(255, 71, 87, 0.3));
            z-index: 13;
        }

        /* 圆心装饰圆环 */
        .center-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border: 3px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            z-index: 12;
            animation: ringRotate 10s linear infinite;
        }

        @keyframes ringRotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* 转盘下方的开始按钮 */
        .spin-button-container {
            margin-top: 30px;
            text-align: center;
        }

        .spin-button {
            background: linear-gradient(135deg, #ff6b6b, #ff8e53);
            color: white;
            border: none;
            padding: 18px 60px;
            font-size: 24px;
            font-weight: bold;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .spin-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .spin-button:hover::before {
            left: 100%;
        }

        .spin-button:hover:not(:disabled) {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.7);
        }

        .spin-button:active:not(:disabled) {
            transform: translateY(-1px) scale(1.02);
        }

        .spin-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* 按钮状态文字 */
        .spin-button.spinning {
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
            animation: buttonPulse 1s ease-in-out infinite;
        }

        @keyframes buttonPulse {
            0%, 100% { box-shadow: 0 10px 30px rgba(149, 165, 166, 0.5); }
            50% { box-shadow: 0 10px 40px rgba(149, 165, 166, 0.8); }
        }

        .info-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 100%;
        }

        .prize-list {
            margin-bottom: 30px;
        }

        .prize-list h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3em;
        }

        .prize-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        .prize-item:hover {
            transform: translateX(5px);
        }

        .prize-color {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .prize-name {
            flex: 1;
            font-weight: 500;
        }

        .prize-probability {
            color: #666;
            font-size: 0.9em;
        }

        .history-section {
            margin-top: 30px;
        }

        .history-section h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3em;
        }

        .history-list {
            max-height: 200px;
            overflow-y: auto;
            padding-right: 10px;
        }

        .history-item {
            padding: 10px;
            margin-bottom: 8px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #667eea;
            animation: slideIn 0.5s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .history-time {
            font-size: 0.85em;
            color: #999;
        }

        .history-prize {
            font-weight: bold;
            color: #333;
            margin-top: 5px;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #e0e0e0;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }

        .stat-label {
            color: #666;
            font-size: 0.9em;
            margin-top: 5px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.show {
            display: flex;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 400px;
            animation: bounceIn 0.5s ease;
        }

        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }

        .prize-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }

        .prize-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 10px;
        }

        .prize-desc {
            color: #666;
            margin-bottom: 20px;
        }

        .modal-button {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 1em;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .modal-button:hover {
            transform: scale(1.05);
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: #f0f;
            position: absolute;
            animation: confetti-fall 3s linear;
            z-index: 999;
        }

        @keyframes confetti-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* 顶部高亮区域 */
        .highlight-zone {
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 30px;
            background: rgba(255, 235, 59, 0.3);
            border-radius: 0 0 60px 60px;
            z-index: 8;
            animation: highlightPulse 2s ease-in-out infinite;
            border: 2px dashed #ffd700;
        }

        @keyframes highlightPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        /* 指向标记 */
        .pointer-marker {
            position: absolute;
            top: -140px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: #ff4757;
            text-shadow: 0 2px 10px rgba(255, 71, 87, 0.5);
            animation: markerBounce 1s ease-in-out infinite;
            z-index: 16;
        }

        @keyframes markerBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-5px); }
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }

            .wheel-container {
                width: 350px;
                height: 350px;
            }

            header h1 {
                font-size: 2em;
            }

            .prize-text {
                font-size: 12px;
            }

            .pointer {
                border-left-width: 20px;
                border-right-width: 20px;
                border-bottom-width: 50px;
                top: -70px;
            }

            .pointer-base {
                width: 50px;
                height: 50px;
            }

            .pointer-line {
                height: 70px;
            }

            .spin-button {
                padding: 15px 50px;
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>🎯 精准幸运大转盘</h1>
        <p class="subtitle">指向与结果完全一致，公平公正！</p>
    </header>

    <main>
        <div class="container">
            <section class="wheel-section">
                <div class="wheel-container">
                    <!-- 顶部高亮区域 -->
                    <div class="highlight-zone"></div>
                    
                    <!-- 指向标记 -->
                    <div class="pointer-marker">👆</div>
                    
                    <!-- 圆心指针组件 -->
                    <div class="pointer-container">
                        <div class="center-ring"></div>
                        <div class="pointer-line"></div>
                        <div class="pointer"></div>
                        <div class="pointer-base"></div>
                    </div>
                    
                    <div class="wheel" id="wheel">
                        <!-- SVG用于绘制扇形 -->
                        <svg class="wheel-svg" id="wheelSvg" viewBox="0 0 450 450">
                            <!-- 扇形将通过JavaScript动态生成 -->
                        </svg>
                        <!-- 文字层 -->
                        <div class="wheel-text" id="wheelText">
                            <!-- 文字将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                
                <!-- 转盘下方的开始按钮 -->
                <div class="spin-button-container">
                    <button class="spin-button" id="spinBtn">开始抽奖</button>
                </div>
            </section>

            <section class="info-section">
                <div class="prize-list">
                    <h3>🎁 奖品列表</h3>
                    <div id="prizeList"></div>
                </div>

                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value" id="totalSpins">0</div>
                        <div class="stat-label">总抽奖次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="todaySpins">0</div>
                        <div class="stat-label">今日抽奖</div>
                    </div>
                </div>

                <div class="history-section">
                    <h3>📜 抽奖记录</h3>
                    <div class="history-list" id="historyList">
                        <p style="color: #999; text-align: center;">暂无抽奖记录</p>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <div class="modal" id="resultModal">
        <div class="modal-content">
            <div class="prize-icon" id="prizeIcon">🎉</div>
            <h2 class="prize-title" id="prizeTitle">恭喜中奖！</h2>
            <p class="prize-desc" id="prizeDesc">您获得了</p>
            <button class="modal-button" onclick="closeModal()">确定</button>
        </div>
    </div>

    <script>
        // 奖品配置 - 等概率
        const prizes = [
            { name: '一等奖', color: '#FF6B6B', icon: '🏆' },
            { name: '二等奖', color: '#4ECDC4', icon: '🥈' },
            { name: '三等奖', color: '#45B7D1', icon: '🥉' },
            { name: '幸运奖', color: '#96CEB4', icon: '🎁' },
            { name: '参与奖', color: '#FFEAA7', icon: '⭐' },
            { name: '鼓励奖', color: '#DDA0DD', icon: '💝' },
            { name: '特别奖', color: '#FFA07A', icon: '🌟' },
            { name: '谢谢参与', color: '#DFE6E9', icon: '😊' }
        ];

        let isSpinning = false;
        let currentRotation = 0;
        let history = [];
        let stats = {
            total: 0,
            today: 0
        };

        // 初始化转盘 - 使用SVG绘制等分扇形
        function initWheel() {
            const svg = document.getElementById('wheelSvg');
            const textContainer = document.getElementById('wheelText');
            const centerX = 225;
            const centerY = 225;
            const radius = 200;
            const segmentAngle = 360 / prizes.length;
            
            prizes.forEach((prize, index) => {
                // 计算扇形的起始和结束角度
                // 第一个奖品从-90度开始（顶部）
                const startAngle = index * segmentAngle - 90;
                const endAngle = (index + 1) * segmentAngle - 90;
                
                // 转换为弧度
                const startRad = (startAngle * Math.PI) / 180;
                const endRad = (endAngle * Math.PI) / 180;
                
                // 计算扇形路径
                const x1 = centerX + radius * Math.cos(startRad);
                const y1 = centerY + radius * Math.sin(startRad);
                const x2 = centerX + radius * Math.cos(endRad);
                const y2 = centerY + radius * Math.sin(endRad);
                
                // 创建扇形路径
                const largeArcFlag = segmentAngle > 180 ? 1 : 0;
                const pathData = [
                    `M ${centerX} ${centerY}`,
                    `L ${x1} ${y1}`,
                    `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
                    'Z'
                ].join(' ');
                
                // 创建扇形元素
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('d', pathData);
                path.setAttribute('fill', prize.color);
                path.setAttribute('stroke', 'white');
                path.setAttribute('stroke-width', '2');
                svg.appendChild(path);
                
                // 添加文字 - 调整位置避免被指针遮挡
                const textAngle = startAngle + segmentAngle / 2;
                const textRad = (textAngle * Math.PI) / 180;
                const textRadius = radius * 0.65; // 稍微向内调整
                const textX = centerX + textRadius * Math.cos(textRad);
                const textY = centerY + textRadius * Math.sin(textRad);
                
                const textElement = document.createElement('div');
                textElement.className = 'prize-text';
                textElement.style.left = textX + 'px';
                textElement.style.top = textY + 'px';
                textElement.style.transform = `translate(-50%, -50%) rotate(${textAngle + 90}deg)`;
                textElement.innerHTML = `
                    <div style="font-size: 20px;">${prize.icon}</div>
                    <div style="margin-top: 2px;">${prize.name}</div>
                `;
                textContainer.appendChild(textElement);
            });
        }

        // 初始化奖品列表
        function initPrizeList() {
            const prizeList = document.getElementById('prizeList');
            prizes.forEach(prize => {
                const item = document.createElement('div');
                item.className = 'prize-item';
                item.innerHTML = `
                    <div class="prize-color" style="background: ${prize.color}"></div>
                    <span class="prize-name">${prize.icon} ${prize.name}</span>
                    <span class="prize-probability">12.5%</span>
                `;
                prizeList.appendChild(item);
            });
        }

        // 随机获取中奖结果（等概率）
        function getRandomPrize() {
            return Math.floor(Math.random() * prizes.length);
        }

        // 根据最终旋转角度计算指针指向的奖品
        function getPrizeByAngle(finalRotation) {
            const segmentAngle = 360 / prizes.length;
            // 将角度标准化到 0-360 范围
            const normalizedAngle = ((360 - (finalRotation % 360)) + 90) % 360;
            // 计算指向的奖品索引
            const prizeIndex = Math.floor(normalizedAngle / segmentAngle);
            return prizeIndex;
        }

        // 开始抽奖 - 全新的角度计算逻辑
        function spin() {
            if (isSpinning) return;
            
            isSpinning = true;
            const spinBtn = document.getElementById('spinBtn');
            spinBtn.disabled = true;
            spinBtn.textContent = '抽奖中...';
            spinBtn.classList.add('spinning');
            
            // 计算基础旋转角度（5圈）
            const baseRotation = 360 * 5;
            // 随机角度（0-360度）
            const randomAngle = Math.random() * 360;
            // 总旋转角度
            const totalRotation = baseRotation + randomAngle;
            
            // 更新当前旋转角度
            currentRotation += totalRotation;
            
            // 应用旋转动画
            const wheel = document.getElementById('wheel');
            wheel.style.transform = `rotate(${currentRotation}deg)`;
            
            // 4秒后显示结果
            setTimeout(() => {
                // 根据最终角度计算中奖奖品
                const prizeIndex = getPrizeByAngle(currentRotation);
                const prize = prizes[prizeIndex];
                
                // 显示结果
                showResult(prize);
                addToHistory(prize);
                updateStats();
                
                // 重置状态
                isSpinning = false;
                spinBtn.disabled = false;
                spinBtn.textContent = '开始抽奖';
                spinBtn.classList.remove('spinning');
            }, 4000);
        }

        // 显示中奖结果
        function showResult(prize) {
            const modal = document.getElementById('resultModal');
            const prizeIcon = document.getElementById('prizeIcon');
            const prizeTitle = document.getElementById('prizeTitle');
            const prizeDesc = document.getElementById('prizeDesc');
            
            prizeIcon.textContent = prize.icon;
            prizeTitle.textContent = prize.name === '谢谢参与' ? '再接再厉！' : '恭喜中奖！';
            prizeDesc.textContent = `您获得了 ${prize.icon} ${prize.name}`;
            
            modal.classList.add('show');
            
            // 如果不是谢谢参与，添加彩纸效果
            if (prize.name !== '谢谢参与') {
                createConfetti();
            }
        }

        // 创建彩纸效果
        function createConfetti() {
            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD'];
            for (let i = 0; i < 50; i++) {
                setTimeout(() => {
                    const confetti = document.createElement('div');
                    confetti.className = 'confetti';
                    confetti.style.left = Math.random() * 100 + '%';
                    confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
                    confetti.style.animationDelay = Math.random() * 0.5 + 's';
                    document.body.appendChild(confetti);
                    
                    setTimeout(() => confetti.remove(), 3000);
                }, i * 30);
            }
        }

        // 关闭弹窗
        function closeModal() {
            const modal = document.getElementById('resultModal');
            modal.classList.remove('show');
        }

        // 添加到历史记录
        function addToHistory(prize) {
            const now = new Date();
            const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
            
            history.unshift({
                prize: prize,
                time: timeStr
            });
            
            // 只保留最近10条记录
            if (history.length > 10) {
                history.pop();
            }
            
            updateHistoryDisplay();
        }

        // 更新历史记录显示
        function updateHistoryDisplay() {
            const historyList = document.getElementById('historyList');
            
            if (history.length === 0) {
                historyList.innerHTML = '<p style="color: #999; text-align: center;">暂无抽奖记录</p>';
                return;
            }
            
            historyList.innerHTML = history.map(item => `
                <div class="history-item">
                    <div class="history-time">${item.time}</div>
                    <div class="history-prize">${item.prize.icon} ${item.prize.name}</div>
                </div>
            `).join('');
        }

        // 更新统计
        function updateStats() {
            stats.total++;
            stats.today++;
            
            document.getElementById('totalSpins').textContent = stats.total;
            document.getElementById('todaySpins').textContent = stats.today;
            
            // 保存到localStorage
            localStorage.setItem('wheelStats', JSON.stringify(stats));
        }

        // 加载统计数据
        function loadStats() {
            const saved = localStorage.getItem('wheelStats');
            if (saved) {
                stats = JSON.parse(saved);
                document.getElementById('totalSpins').textContent = stats.total;
                document.getElementById('todaySpins').textContent = stats.today;
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initWheel();
            initPrizeList();
            loadStats();
            
            // 绑定抽奖按钮
            document.getElementById('spinBtn').addEventListener('click', spin);
            
            // 点击模态框外部关闭
            document.getElementById('resultModal').addEventListener('click', (e) => {
                if (e.target.id === 'resultModal') {
                    closeModal();
                }
            });
        });

        // 每天重置今日抽奖次数
        function checkDailyReset() {
            const lastReset = localStorage.getItem('lastResetDate');
            const today = new Date().toDateString();
            
            if (lastReset !== today) {
                stats.today = 0;
                localStorage.setItem('lastResetDate', today);
                localStorage.setItem('wheelStats', JSON.stringify(stats));
                document.getElementById('todaySpins').textContent = '0';
            }
        }

        // 页面加载时检查
        checkDailyReset();

        // 添加键盘快捷键
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && !isSpinning) {
                e.preventDefault();
                spin();
            }
        });
    </script>
</body>
</html>